<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>专辑库 - QQ音乐</title>
    <link rel="stylesheet" href="styles/hw.css" />
  </head>
  <body>
    <header>
      <div class="header-inner">
        <img src="imgs/qqmusic.png" />
      </div>
    </header>

    <main>
      <p class="tag-title">歌单推荐</p>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">为你推荐</a>
        <a href="#" class="tag-item">运动</a>
        <a href="#" class="tag-item">网络歌曲</a>
        <a href="#" class="tag-item">思念</a>
        <a href="#" class="tag-item">官方歌曲</a>
        <a href="#" class="tag-item">情歌</a>
      </div>
      <div class="playlist">
        <!-- 歌单内容将通过JavaScript动态生成 -->
      </div>
    </main>

    <main>
      <p class="tag-title">新歌首发</p>
      <div class="tag-list">
        <button class="tag-all"><img src="imgs/icon_play.png" class="tag-all-img">播放全部</button>
        <a href="#" class="tag-item tag-active">最新</a>
        <a href="#" class="tag-item">内地</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">日本</a>
      </div>
      <div class="playlist2">
        <!-- 新歌内容将通过JavaScript动态生成 -->
      </div>
    </main>

    <main>
      <p class="tag-title">MV</p>
      <div class="tag-list">
        <a href="#" class="tag-item tag-active">精选</a>
        <a href="#" class="tag-item">内地</a>
        <a href="#" class="tag-item">韩国</a>
        <a href="#" class="tag-item">港台</a>
        <a href="#" class="tag-item">欧美</a>
        <a href="#" class="tag-item">日本</a>
      </div>
      <div class="playlist3">
        <!-- MV内容将通过JavaScript动态生成 -->
      </div>
    </main>

    <footer></footer>

    <!-- 内联JavaScript代码 -->
    <script>
      // 从JSON文件加载数据并渲染到页面
      document.addEventListener('DOMContentLoaded', function() {
          // 加载JSON数据
          fetch('task.json')
              .then(response => response.json())
              .then(data => {
                  // 渲染歌单推荐
                  renderPlaylist(data.playlist);
                  
                  // 渲染新歌首发
                  renderSongList(data.songlist);
                  
                  // 渲染MV
                  renderMvList(data.mvlist);
              })
              .catch(error => console.error('Error loading JSON data:', error));

          // 渲染歌单推荐
          function renderPlaylist(playlists) {
              const playlistContainer = document.querySelector('.playlist');
              if (!playlistContainer) return;

              // 清空现有内容
              playlistContainer.innerHTML = '';

              // 遍历歌单数据并创建HTML元素
              playlists.forEach(item => {
                  const albumDiv = document.createElement('div');
                  albumDiv.className = 'album';
                  
                  // 格式化播放量
                  const listenNum = formatListenNum(item.listen_num);
                  
                  albumDiv.innerHTML = `
                      <a href="#" class="cover-wrap">
                          <img src="${item.cover}" class="cover-img" alt="${item.title}">
                          <div class="cover-mask"></div>
                          <img src="imgs/cover_play.png" class="cover-play" />
                      </a>
                      <div>
                          <a href="#" class="nowrap album-title">${item.title}</a>
                      </div>
                      <div>
                          <a href="#" class="nowrap album-author">播放量：${listenNum}</a>
                      </div>
                  `;
                  
                  playlistContainer.appendChild(albumDiv);
              });
          }

          // 渲染新歌首发
          function renderSongList(songs) {
              const songListContainer = document.querySelector('.playlist2');
              if (!songListContainer) return;

              // 清空现有内容
              songListContainer.innerHTML = '';

              // 遍历歌曲数据并创建HTML元素
              songs.forEach((song, index) => {
                  const albumDiv = document.createElement('div');
                  albumDiv.className = 'album2';
                  
                  // 格式化时间
                  const formattedTime = formatTime(song.interval);
                  
                  // 处理歌手信息
                  const singer = song.singer.join(' / ');
                  
                  albumDiv.innerHTML = `
                      <a href="#" class="cover-wrap2">
                          <img src="${song.cover}" class="cover-img2" alt="${song.name}">
                          <div class="cover-mask2"></div>
                          <img src="imgs/cover_play.png" class="cover-play" />
                      </a>
                      <div>
                          <a href="#" class="nowrap album-title">${song.name}</a>
                      </div>
                      <div>
                          <a href="#" class="nowrap album-author">${singer}</a>
                      </div>
                      <div class="nowrap album-time">${formattedTime}</div>
                  `;
                  
                  songListContainer.appendChild(albumDiv);
              });
          }

          // 渲染MV列表
          function renderMvList(mvs) {
              const mvListContainer = document.querySelector('.playlist3');
              if (!mvListContainer) return;

              // 清空现有内容
              mvListContainer.innerHTML = '';

              // 遍历MV数据并创建HTML元素
              mvs.forEach(item => {
                  const albumDiv = document.createElement('div');
                  albumDiv.className = 'album';
                  
                  // 格式化播放量
                  const listenNum = formatListenNum(item.listen_num);
                  
                  albumDiv.innerHTML = `
                      <a href="#" class="cover-wrap">
                          <img src="${item.cover}" class="cover-img3" alt="${item.title}">
                          <div class="cover-mask"></div>
                          <img src="imgs/cover_play.png" class="cover-play" />
                      </a>
                      <div>
                          <a href="#" class="nowrap album-title">${item.title}</a>
                      </div>
                      <div>
                          <a href="#" class="nowrap album-author">${item.singer}</a>
                      </div>
                      <div class="nowrap album-time"><img src="./imgs/icon_listen.png">${listenNum}</div>
                  `;
                  
                  mvListContainer.appendChild(albumDiv);
              });
          }

          // 格式化播放量数字
          function formatListenNum(num) {
              if (num >= 10000) {
                  return (num / 10000).toFixed(1) + '万';
              }
              return num.toLocaleString();
          }

          // 格式化时间（秒转为分钟:秒）
          function formatTime(seconds) {
              const minutes = Math.floor(seconds / 60);
              const secs = seconds % 60;
              return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
          }
      });
    </script>
  </body>
</html>
